<h1 mat-dialog-title>Packet filters</h1>

<div class="modal-form-container" class="content">
  <mat-tab-group *ngIf="this.filters">
    <mat-tab label="Frequency drop">
      <mat-form-field class="input-field">
        <input matInput placeholder="Frequency" type="number" [(ngModel)]="filters.frequency_drop[0]" />
      </mat-form-field>
    </mat-tab>
    <mat-tab label="Packet loss">
      <mat-form-field class="input-field">
        <input matInput placeholder="Chance" type="number" [(ngModel)]="filters.packet_loss[0]" />
      </mat-form-field>
    </mat-tab>
    <mat-tab label="Delay">
      <mat-form-field class="input-field">
        <input matInput placeholder="Latency" type="number" [(ngModel)]="filters.delay[0]" />
      </mat-form-field>
      <mat-form-field class="input-field">
        <input matInput placeholder="Jitter" type="number" [(ngModel)]="filters.delay[1]" />
      </mat-form-field>
    </mat-tab>
    <mat-tab label="Corrupt">
      <mat-form-field class="input-field">
        <input matInput placeholder="Latency" type="number" [(ngModel)]="filters.corrupt[0]" />
      </mat-form-field>
    </mat-tab>
    <mat-tab label="Berkeley Packet Filter (BPF)">
      <mat-form-field class="input-field">
        <textarea matInput type="text" [(ngModel)]="filters.bpf[0]"></textarea>
      </mat-form-field>
    </mat-tab>
  </mat-tab-group>
</div>
<div class="bottom-bar">
  <div class="spacer"></div>
  <div mat-dialog-actions layout="row" class="dialog-actions">
    <button mat-button (click)="onNoClick()" color="accent">Cancel</button>
    <button mat-button (click)="onResetClick()" color="accent">Reset</button>
    <button mat-button (click)="onYesClick()" tabindex="2" mat-raised-button color="primary">Apply</button>
    <div class="divider"></div>
    <button mat-button (click)="onHelpClick()" color="accent">Help</button>
  </div>
</div>
